<template>
  <div class="case-manage-container">
    <div class="case-manage-content">
      <div class="case-manage-wrapper">
        <div class="search-bar">
          <el-autocomplete
            v-model="searchName"
            :fetch-suggestions="querySearchCaseName"
            placeholder="请输入案件名称"
            clearable
            style="width: 220px; margin-right: 16px;"
          />
          <el-select v-model="searchStatus" placeholder="请选择案件状态" clearable style="width: 180px; margin-right: 16px;">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select v-model="searchType" placeholder="请选择案件类型" clearable style="width: 180px; margin-right: 16px;">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </div>
        <el-table :data="pagedCases" style="width: 100%; margin-top: 16px;">
          <el-table-column prop="title" label="案件名称" min-width="180" />
          <el-table-column prop="status" label="案件状态" min-width="120">
        <template #default="scope">
              <el-tag :type="statusTagType(scope.row.status)">
                {{ statusLabel(scope.row.status) }}
              </el-tag>
        </template>
      </el-table-column>
          <el-table-column prop="type" label="案件类型" min-width="120">
        <template #default="scope">
              {{ typeLabel(scope.row.type) }}
        </template>
      </el-table-column>
          <el-table-column prop="apply_time" label="申请时间" min-width="170" />
          <el-table-column prop="applicantName" label="申请人" min-width="100" />
          <el-table-column label="操作" min-width="220">
        <template #default="scope">
              <el-button size="small" type="primary" @click="viewDetail(scope.row)">查看详情</el-button>
              <el-button size="small" class="delete-btn" @click="deleteCase(scope.row)">删除</el-button>
              <el-button size="small" class="edit-btn" @click="editCase(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
        <div class="pagination-wrapper">
          <el-pagination
            background
            layout="prev, pager, next, jumper, ->, total"
            :total="filteredCases.length"
            v-model:page-size="pageSize"
            v-model:current-page="currentPage"
          />
        </div>
      </div>
    </div>
    <!-- 编辑案件弹窗 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑案件"
      width="700px"
      :close-on-click-modal="false"
      @close="onEditCancel"
    >
      <div class="form-card" style="box-shadow:none;padding:0;">
        <div class="form-section-title"><span class="section-bar"></span>基本信息</div>
        <el-form :model="editForm" label-width="100px">
          <el-form-item label="案件名称">
            <el-input v-model="editForm.title" />
          </el-form-item>
          <el-form-item label="案件状态">
            <el-select v-model="editForm.status" placeholder="请选择状态">
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        <el-form-item label="案件类型">
            <el-select v-model="editForm.type" placeholder="请选择类型">
              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
          <el-form-item label="申请人">
            <el-input v-model="editForm.applicantName" />
        </el-form-item>
        </el-form>
        <div class="form-section-title" style="margin-top:24px;"><span class="section-bar"></span>案件描述</div>
        <el-form :model="editForm" label-width="0">
          <el-form-item>
            <el-input type="textarea" v-model="editForm.description" :rows="6" />
        </el-form-item>
      </el-form>
      </div>
      <template #footer>
        <el-button @click="onEditCancel">取消</el-button>
        <el-button type="primary" class="save-btn" @click="onEditSave">保存</el-button>
      </template>
    </el-dialog>
    <!-- 查看详情弹窗 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="案件详情"
      width="700px"
      :close-on-click-modal="false"
      @close="onDetailCancel"
    >
      <div class="form-card" style="box-shadow:none;padding:0;">
        <div class="form-section-title"><span class="section-bar"></span>基本信息</div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="案件名称">{{ detailData.title }}</el-descriptions-item>
          <el-descriptions-item label="案件状态">{{ statusLabel(detailData.status) }}</el-descriptions-item>
          <el-descriptions-item label="案件类型">{{ typeLabel(detailData.type) }}</el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ detailData.apply_time }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ detailData.applicantName }}</el-descriptions-item>
        </el-descriptions>
        <div class="form-section-title" style="margin-top:24px;"><span class="section-bar"></span>案件描述</div>
        <div class="desc-block">{{ detailData.description }}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { mockDatabase } from '@/mock/modules/case'
import { useRouter } from 'vue-router'
const router = useRouter()

// 搜索条件
const searchName = ref('')
const searchStatus = ref('')
const searchType = ref('')

// 分页相关
const pageSize = ref(8)
const currentPage = ref(1)

// 状态和类型选项
const statusOptions = [
  { value: 0, label: '待审核' },
  { value: 1, label: '审核通过' },
  { value: 2, label: '审核未通过' },
  { value: 3, label: '已结案' },
  { value: 4, label: '已撤回' }
]
const typeOptions = [
  { value: 'CIVIL', label: '民事案件' },
  { value: 'CRIMINAL', label: '刑事案件' },
  { value: 'ADMINISTRATIVE', label: '行政案件' },
  { value: 'OTHER', label: '其他' }
]

// 使用 generateCases 动态生成数据
const allCases = ref(mockDatabase.generateCases())

// 过滤
const filteredCases = computed(() => {
  return allCases.value.filter(item => {
    const matchName = !searchName.value || item.title.includes(searchName.value)
    const matchStatus = searchStatus.value === '' ? true : item.status === searchStatus.value
    const matchType = !searchType.value || item.type === searchType.value
    return matchName && matchStatus && matchType
  })
})

// 分页后的数据
const pagedCases = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredCases.value.slice(start, end)
})

// 案件名称选项
const caseNameOptions = computed(() => {
  const names = allCases.value.map(item => item.title)
  return [...new Set(names)]
})

function handleSearch() {
  currentPage.value = 1 // 查询后回到第一页
}

function statusLabel(status) {
  const map = {
    0: '待审核',
    1: '审核通过',
    2: '审核未通过',
    3: '已结案',
    4: '已撤回'
  }
  return map[status] || status
}
function statusTagType(status) {
  const map = {
    0: 'info',      // 待审核
    1: 'success',   // 审核通过
    2: 'danger',    // 审核未通过
    3: 'warning',   // 已结案
    4: 'default'    // 已撤回
  }
  return map[status] || ''
}
function typeLabel(type) {
  const map = {
    CIVIL: '民事案件',
    CRIMINAL: '刑事案件',
    ADMINISTRATIVE: '行政案件',
    OTHER: '其他'
  }
  return map[type] || type
}

// 操作按钮
function viewDetail(row) {
  detailData.value = { ...row }
  detailDialogVisible.value = true
}
function deleteCase(row) {
  allCases.value = allCases.value.filter(item => item.id !== row.id)
}
const editDialogVisible = ref(false)
const editForm = ref({})

// 修复：补充详情弹窗的响应式变量定义
const detailDialogVisible = ref(false)
const detailData = ref({})

function editCase(row) {
  editForm.value = { ...row }
  editDialogVisible.value = true
}
function onEditSave() {
  const idx = allCases.value.findIndex(item => item.id === editForm.value.id)
  if (idx !== -1) {
    allCases.value[idx] = { ...editForm.value }
  }
  editDialogVisible.value = false
}
function onEditCancel() {
  editDialogVisible.value = false
}

function onDetailCancel() {
  detailDialogVisible.value = false
}

// 自动补全方法
function querySearchCaseName(queryString, cb) {
  const names = allCases.value.map(item => item.title)
  const uniqueNames = [...new Set(names)]
  const results = uniqueNames.filter(name => name.includes(queryString)).map(name => ({ value: name }))
  cb(results)
}
</script>

<style scoped>
.case-manage-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 0;
  background: #f6f8fa;
}

.case-manage-content {
  width: 95%;
  max-width: 1400px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  padding: 40px 0 24px 0;
  text-align: center;
}

.page-header h2 {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.page-description {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
  line-height: 1.6;
}

.case-manage-wrapper {
  padding: 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding: 24px 0 0 0;
  background: #fff;
  border-top: 1px solid #e8eaed;
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

.delete-btn {
  background: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
  transition: background 0.2s, border-color 0.2s;
}
.delete-btn:hover {
  background: #f78989;
  border-color: #f78989;
}

.edit-btn {
  background: #e6a23c;
  border-color: #e6a23c;
  color: #fff;
  transition: background 0.2s, border-color 0.2s;
}
.edit-btn:hover {
  background: #ebb563;
  border-color: #ebb563;
}

.save-btn {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
  transition: background 0.2s, border-color 0.2s;
}
.save-btn:hover {
  background: #66b1ff;
  border-color: #66b1ff;
}

.form-card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}

.form-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.section-bar {
  width: 4px;
  height: 16px;
  background: #409eff;
  margin-right: 8px;
  border-radius: 2px;
}

.desc-block {
  background: #f8fafd;
  padding: 16px;
  border-radius: 6px;
  line-height: 1.6;
  color: #666;
  min-height: 80px;
}

/* 响应式设计 */
@media (max-width: 900px) {
  .case-manage-content {
    width: 98%;
    min-width: 0;
  }
  .case-manage-wrapper {
    padding: 16px;
  }
  .page-header {
    padding: 24px 0 16px 0;
  }
}
@media (max-width: 600px) {
  .case-manage-content {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .case-manage-wrapper {
    padding: 8px;
  }
  .search-bar {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }
  .search-bar > * {
    width: 100% !important;
    margin-right: 0 !important;
  }
}
</style> 
